<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计算机</title>
    <style type="text/css">
        body {
            font-size: 14px;
            font-family: "微软雅黑";
        }
        #calculator {
            width: 500px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 15px;
        }
        #calculator .input {
            width: 100%;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            padding: 0 5px;
        }
        #calculator .btn {
            width: 100%;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            padding: 0 5px;
            background: #eee;
        }
    </style>
</head>
<body>
    <div id="calculator">
        <input type="text" class="input" id="formula" />
        <input type="button" class="btn" value="计算" id="calculate" />
        <div id="answer"></div>
    </div>
    <script type="text/javascript">
        var calculate = document.getElementById('calculate');
        calculate.onclick = function() {
            var formula = document.getElementById('formula').value;
            var answer = document.getElementById('answer');
            answer.innerHTML = eval(formula);
        }
    </script>
</body>
</html>
